<template>
  <div>
    <!--  队员信息大图  -->
    <div>
      <el-row>
        <el-col :span="24">
          <div class="grid-content-banner bg-img">
            <div class="team-bg-content">
              <el-row>
                <el-col :span="12">
                  <div class="grid-content-banner-img bg-purple">
                    <div class="team-bg-content-img-box">
                      <img class="team-bg-content-img" src="../assets/img/xh.png" alt="">
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content-banner-text bg-purple-light">
                    <div class="team-bg-content-text-box">
                      <h1>{{ dataListMember.uMember.memberName }}</h1>
                      <h3>{{ dataListMember.uMember.memberInfo }}</h3>
                      <br>
                      <span style="color: white">战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述战队队描述战队描述战队描述战队描述战队描述战队描述战队描述战队描述</span>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--  最近比赛  -->
    <div>
      <h2 class="title">队员信息</h2>
      <br>
      <hr>
      <br>
      <el-table
        :data="tableData"
        stripe
        style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);width: 92%; margin: 0 auto">
        <el-table-column
          prop="time"
          label="队员Id"
          width="180"
          class="member-table-col-small">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180"
          class="member-table-col-small">
        </el-table-column>
        <el-table-column
          prop="memberSupport"
          label="获赞数"
          width="180"
          class="member-table-col-small">
        </el-table-column>
        <el-table-column
          prop="career"
          label="生涯">
        </el-table-column>
      </el-table>
    </div>
    <!--  评论  -->
    <div class="title" id="review-bigbox">
      <h2>评论区</h2>
      <br>
      <hr>
      <br>
      <div id="textarea-box">
        <el-input
          style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)"
          type="textarea"
          :rows="6"
          placeholder="请输入内容"
          v-model="textarea"
          size="medium">
        </el-input>
        <div style="margin-top: 1%" id="textarea-box-btn">
          <el-button @click="Comment()" :disabled="disabled" slot="reference">点击发送评论</el-button>
        </div>
      </div>
      <br>
      <div id="review-box">
        <div v-for="item in review">
          <div id="small-box">
            <el-divider content-position="left">评论来自：{{ item.reviewOwner }} —— to：{{ item.reviewParent }}</el-divider>
            <span>{{ item.reviewInfo }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {request} from "../network/request";
import Vue from "vue";
import axios from "axios";

export default {
  name: "teammember",
  data() {
    return {
      labelPosition: 'right',
      dataListMember: '',
      review: [],
      textarea: '',
    }
  },
  computed: {
    MemberName() {
      return this.$route.params.membername
    },
    tableData() {
      const array = [
        {
          time: this.dataListMember.uMember.memberId,
          name: this.dataListMember.uMember.memberName,
          memberSupport: this.dataListMember.uMember.memberSupport,
          career: this.dataListMember.uMember.memberInfo
        },]
      return array
    }
  },
  methods: {
    Comment() {
      const list = {
        reviewId: this.review.length,
        reviewUser: this.$store.state.userName,
        reviewInfo: this.textarea,
      }
      Vue.set(this.review, this.review.length, list)
      // 网络请求 传递评论到数据库

      const number = parseInt(this.$store.state.userId)
      const json = {
        reviewId: 1,
        reviewOwner: number,
        reviewInfo: this.textarea,
        reviewParent: this.MemberName
      }
      axios.post('http://localhost:8081/teams/reviewmember/save', json)
        .then(res => {
          location.reload()
        })
        .catch(Error => {

        })
    },
    JudgePower() {
      if (this.$store.state.userPower == 0) {
        this.disabled = false
      } else {
        this.disabled = ''
      }
    }
  },
  created() {
    request({
      url: '/umember/info/' + this.MemberName,
    }).then(res => {
      this.dataListMember = res

      console.log(this.dataListMember)
    }).catch(err => {
      console.log(err)
    })

    request({
      url: "reviewmember/list",
    }).then(res => {
      this.review = res.page.list

      console.log(this.review);
    }).catch(err => {
      console.log(err)
    })

    this.JudgePower()


  }
}
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.grid-content-banner {
  border-radius: 4px;
  height: 521px;
}

.grid-content-banner-img {
  width: 100%;
  height: 521px;
  margin: 0 auto;
}

.team-bg-content-img-box {
  width: 70%;
  height: 70%;
  padding: 12%;
  margin: 0 auto;
}

.team-bg-content-img {
  width: 100%;
  height: 100%;
}

.grid-content-banner-text {
}

.bg-img {
  background-image: url("../assets/img/team_banner-bg.jpg");
}

.team-bg-content {
  width: 70%;
  height: 100%;
  margin: 0 auto;
  color: white;
}


.team-bg-content-text-box {
  width: 80%;
  height: 70%;
  margin: 22% auto;
}

span {
  color: black;
}

.bg-purple {
  background-color: #d3dce6;
}

.bg-purple-light {
  //border: 1px solid #d3dce6;
}

.bg-purple-dark {
  background: #99a9bf;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

#textarea-box {
  width: 80%;
  margin: 0 auto;
}

#textarea-box-btn {
  float: right;
}

#review-box {
  width: 80%;
  margin: 0 auto;
  margin-top: 3%;
  border: 1px solid grey;
  border: 1px solid rgb(192, 196, 204);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.add-team {
  width: 30%;
  margin: 0 auto;
}

#small-box {
  width: 90%;
  margin: 3% auto;
}

#review-bigbox {
  margin-bottom: 5%;
}

.title {
  margin-top: 3%;
  margin-left: 2%;
}

#curd-box {
  margin-left: 3.5%;
}

.el-input {
  width: 60%;
  margin-left: 20%;
}
</style>
